<template>
  <div 
    class="ly-popover"
    @click="click"
    @mouseenter="enter"
    @mouseleave="leave"
    :style="styleObj"
    :class="classObj"
  >
    <slot></slot>
    <abs-cpt v-if="type === 'absoulte'" ref="abs" :val="value">
      <slot name="popover"></slot>
    </abs-cpt>
  </div>
</template>
<script>
import absCpt from './absCpt.vue'
export default {
  name:'lyPopover',
  model:{
    props:'value',
    event:'updateData'
  },
  components:{
    absCpt
  },
  provide(){
    return {
      placement:this.placement,
    }
  },
  props:{
    value:{
      type:Boolean,
      default:false
    },
    type:{
      type:String,
      default(){
        return [ 'absoulte','fixed' ][0]
      }
    },
    //触发显示浮动框的事件类型 默认click
    eventType: {
      type: String,
      default() {
        return ["click", "mouseenter"][0];
      }
    },
    placement: {//显示的位置 默认bottom-start
      type: String,
      default(){
        var defaultValues=[];
        ['bottom','right','top','left'].forEach(function(posi){
          ['start','center','end'].forEach(function(tion){
            defaultValues.push(posi+'-'+tion)
          });
        });
        return defaultValues[0]
      }
    },
  },
  data() {
    return {
      active:false
    }
  },
  computed:{
    styleObj(){
      return {
        position:this.type === 'absoulte'?'relative':''
      }
    },
    classObj(){
      return {
        'is-focus':this.active
      }
    }
  },
  mounted() {
     //对外事件 start
    var el = this.$el,
    		_this=this,
        component = this.type === "absoulte"?this.$refs.abs: this.$refs.fixed;
      component.getParentDom(this);
    /**
     * 显示浮层
     * @augments ev 事件
     */
    this.show=function(ev){
      component.show(el, ev);
    }
     /**
     * 隐藏浮层
     * @augments ev 事件
     */
    this.hide=function(ev){
      component.hide(el, ev);
    }
     /**
     * 调戏浮层
     * @augments ev 事件
     */
    this.toggle=function(ev){
      component.toggle(el, ev);
    }
  },
  methods:{
    onHandlerActive(val){
      console.log('valliner')
      this.$emit('updateData',val)
    },
    click(ev){
      if(this.eventType != 'click')return
      this.toggle(ev)
    },
    //mouseenter
    enter(ev) {
      if (this.eventType !== "mouseenter") {
        return;
      }
      this.show(ev);
    },
    //mouseleave
    leave(ev) {
      if (this.eventType !== "mouseenter") {
        return;
      }
      this.hide(ev);
    },
  }
}
</script>
<style lang="scss">
  .ly-popover{
    display: inline-block;
  }
</style>